<template>
	<div >
		<div
		@mouseenter="mouseEventEnter()"
		@mouseleave="mouseEventLeave()"
		@click="callClick()" class="hcj-menu-item" ref='hcj_menu_item' :class="{
			'hcj-menu-item-h': mode == 'horizontal' && submenuItem != true ? true : false,
			'hcj-menu-item-v': mode == 'vertical' ? true : false,
			'hcj-submenu-item': submenuItem
		}">
		<div style="display: flex;" :style="{'color': setTextColor}">
			<slot></slot>
		</div>
		</div>
	</div>

</template>

<script>
	export default {
		name: 'hcj-menu-item',
		props: {
			index: {
				type: String,
				default: '1'
			}
		},
		data() {
			return {
				mode: this.$parent.childMode,
				submenuItem: this.$parent.submenuItem,
				defaultBgColor: this.$parent.setBgColor,
				setMouseColor: this.$parent.setMouseColor,
				setTextColor: this.$parent.setTextColor,
			}
		},
		mounted() {
			this.setMenuStyle();
		},
		methods: {
			callClick() {
				this.$emit('click');
			},
			setMenuStyle() {
				// if(this.mode == 'vertical') {
					this.$refs.hcj_menu_item.style.backgroundColor = this.defaultBgColor;
				// }
			},
			mouseEventEnter() {
				if(this.mode == 'vertical') {
					this.$refs.hcj_menu_item.style.backgroundColor = this.setMouseColor
				}
			},
			mouseEventLeave() {
				if(this.mode == 'vertical') {
					this.$refs.hcj_menu_item.style.backgroundColor = this.defaultBgColor;
				}
			}
		}

	}
</script>

<style scoped>
	.hcj-menu-item {
		margin-left: 10px;
		user-select: none;
		cursor: pointer;
		padding: 10px;
		font-size: 14px;
		font-weight: 550;
		transition: all 0.3s;
		z-index: 99999;
	}

	.hcj-menu-item-v {
		width: 170px;
		padding: 17px 10px;
		overflow: hidden;
		z-index: 99999;
	}


	.hcj-menu-item-h {
		text-align: center;
		width: auto;
		padding-right: 10px;
		padding-left: 10px;
	}

	/* 横向submenu子菜单 */
	.hcj-submenu-item {
		font-weight: 500;
		color: #515151;
	}

	.hcj-submenu-item:hover {
		color: black;
	}

	.hcj-menu-item-h:hover {
		border-bottom: 3px solid #00aaff;
		color: #3d3d3d;
	}
</style>